<template>
    <div class="case">
        <div class="bg"></div>

        <div class="container">
            <div class="tools-container">
                <div class="page-title">{{ name }}</div>
                <SearchGroupP @search="onSearch" />
            </div>

            <div class="radio-button-group-1">
                <RadioButtonGroupP v-model="tabActive" :list="tabList" />
            </div>

            <template v-if="Array.isArray(list)">
                <div class="radio-button-group-2">
                    <RadioButtonGroupP v-model="tabActive2" :list="tabList2" />
                </div>
                <template v-if="Array.isArray(list[tabActive2].child[0].child)">
                    <template
                        v-for="item2 in list[tabActive2].child"
                        :key="item2.id"
                    >
                        <div class="cell-title">{{ item2["name"] }}</div>
                        <CaseGroupP :list="item2.child" :keyword="keyword" />
                    </template>
                </template>
                <CaseGroupP
                    v-else
                    :list="list[tabActive2].child"
                    :keyword="keyword"
                />
            </template>

            <CaseGroupP :list="list.child" :keyword="keyword" v-else />
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue";
import { useContent } from ".";

const keyword = ref("");

const {
    onGetCaseList,
    onGetCaseCate,
    name,
    tabActive,
    tabActive2,
    tabList,
    tabList2,
    list,
} = useContent();

const onSearch = (value) => {
    keyword.value = value;
};

await onGetCaseList();
await onGetCaseCate();
</script>
<style lang="scss" scoped>
.case {
    background-color: #f4f8fb;
}

.radio-button-group-1 {
    margin-top: 26px;
    margin-bottom: 10px;
}

.radio-button-group-2 {
    margin-bottom: 30px;
}

.bg {
    width: 100%;
    height: 400px;
    background: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/case/bg.jpg")
        no-repeat 50% 0 / cover;
    z-index: 10;
}

.container {
    width: 1200px;
    margin: 0 auto;
    padding: 20px 0 90px;
}

.tools-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .page-title {
        color: #333;
        font-weight: 600;
        font-size: 28px;
    }
}

.cell-title {
    position: relative;
    padding-left: 12px;
    color: #5085fb;
    line-height: 20px;
    user-select: none;

    &-2 {
        color: #333;
        text-align: center;
        font-weight: bold;
        font-size: 20px;
    }

    &::after {
        content: "";
        width: 4px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #5085fb;
        border-radius: 2px;
        overflow: hidden;
    }
}
</style>
